import React,{forwardRef,useState,useImperativeHandle} from 'react';

// forwardRef 
//  定义: 该方法是一个高阶组件的强化函数 Hoc 
// 作用:主要解决函数组件无法使用ref 属性的情况, 用法 forwardRef(函数组件)

// useImperativeHandle
// 将函数组件中的数据和方法 抛出,这样在父组件中,通过ref 属性就可以获取当前子函数组件的数据和方法
// 语法: useImperativeHandle(()=>{retutn 返回的内容 })  返回的内容就是子函数组件要导出的内容
const Child = (props,ref) => {
    let [num,setNum] = useState(0);

    const addNum = ()=>{
        // 异步方法
        setNum(num+1) 
        console.log(num);
    }
    useImperativeHandle(ref,()=>{
        return {
            num,
            addNum
        }
    })
    return (
        <div>
          <p>子组件 --{num}</p>  
          <p> <button onClick={addNum}>子组件 num++</button></p>
        </div>
    );
}

export default forwardRef(Child);
